<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue 示例</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="app">
<counter :count="0" @change="handleClick"></counter>
<counter :count="1" @change="handleClick"></counter>
    <div >githubTest1</div>
    <div >{{total}}</div>
</div>
<script>

    var counter={
        props:['count'],
        data:function(){
         return {
             number:this.count
         }
        },
        methods:{
          handleChange:function(){
              this.number++
              this.$emit('change',2)
          }
        },
        template:'<div @click="handleChange">{{number}}</div>'
    }
    var app=new Vue({
        el: '#app',//el用于指定一个页面中已经存在的DOM元素来挂在Vue实例，他可以是HTMLElement，也可以是CSS选择器如el:document.getElementById('app)'
        data:{
            total:0,
            count:0
        },
        methods:{
            handleClick:function(step){
                  this.total=this.total+step
            }
        },
        components:{
            counter:counter
        }
           })
</script>
</body>
</html>